<!-- 留言板 -->
<template>
	<div class="message-board-parent-box">
		<el-container class="message-board-el-container-parent">
			<!-- 左边导航栏 -->
			<el-aside class="message-board-left-layout">
				<el-menu class="message-board-left-el-menu-box" background-color="Transparent">
					<el-menu-item index="3" @click="createAMessage()">
						<i class="el-icon-edit"></i>
						<span slot="title">给Ta留言</span>
					</el-menu-item>
					<el-menu-item index="1" @click="loadSystemMsg()">
						<i class="el-icon-chat-dot-round"></i>
						<el-badge :value="unreadMessage.systemMessageCount"
							v-show="unreadMessage.systemMessageCount!==0" class="system-message-count">
							<span></span>
						</el-badge>
						<span slot="title">系统留言</span>
					</el-menu-item>
					<el-menu-item index="2" @click="loadUserMsg()">
						<i class="el-icon-message"></i>

						<span slot="title">私信</span>


						<el-badge :value="unreadMessage.privateMessageCount"
							v-show="unreadMessage.privateMessageCount!==0" class="private-message-count">
							<span></span>
						</el-badge>

					</el-menu-item>
				</el-menu>
			</el-aside>

			<div class="call-back-home-icon-box">
				<el-tooltip class="item star" effect="light" content="返回主页" placement="top">
					<i class="el-icon-cloudy-and-sunny  star" @click="callBackHome"></i>
				</el-tooltip>
			</div>

			<!-- 右边表格 -->
			<el-container class="message-board-right-layout">
				<el-header class="message-board-right-el-header">
					<div class="label-msg-span">{{labelName}}</div>
					

				</el-header>
				<!-- 留言列表界面 -->
				<div class="message-board-right-el-main-parent-div" v-show="showBox">
					<el-main class="message-board-right-table-parent">
						<el-table class="message-board-right-el-table" 
							:header-cell-style="headeRowClass" :row-style="{height:54+'px'}" :data="tableData">
							<el-table-column prop="avatarURL" label="" width="70px">
								<template slot-scope="scope">
									<div>
										<el-tooltip class="item" effect="light" :content="scope.row.nick_name"
											placement="top">
											<el-avatar :size="60" icon="el-icon-user-solid"
												:src="scope.row.avatar_link">
											</el-avatar>
										</el-tooltip>
									</div>
								</template>




							</el-table-column>
							<el-table-column prop="content" label="" width="600px">
								<template slot-scope="scope">
									<div class="message-board-content">
										<span style="color: #409EFF;" v-show="scope.row.is_operation==1">{{scope.row.nick_name}}</span>
										{{scope.row.content}}
									</div>
								</template>
							</el-table-column>
							<el-table-column label="" prop="createTime" align="center" width="300px">
								<template slot-scope="scope">
									<div class="message-board-operation" v-show="scope.row.is_operation==1 && showOperationButton">

										<el-button type="primary" plain
											@click="friendVerification(scope.row.ID,1,scope.row.commenter_id)">同意
										</el-button>
										<el-button plain
											@click="friendVerification(scope.row.ID,0,scope.row.commenter_id)">拒绝
										</el-button>
									</div>
								</template>
							</el-table-column>

							<el-table-column label="" prop="createTime" align="center" width="200px">
								<template slot-scope="scope">
									<div class="message-board-time">
										{{scope.row.create_time}}
									</div>
								</template>
							</el-table-column>
						</el-table>



					</el-main>

					<!-- 分页 -->
					<div slot="footer" class="bottom-tip">

						<el-pagination class="leaving-a-message-page-box" :page-size="8" :pager-count="11"
							:page-count="leavingAMessagePage.pageCount" layout="prev, pager, next"
							:total="leavingAMessagePage.total" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>

				<!-- 创建留言界面 -->
				<div class="message-board-right-create-a-message" v-show="!showBox">
					<div class="message-board-right-user-nick-name-box">
						写给 <el-select v-model="leavingAMessageData.recipientId.ID" clearable filterable remote
							reserve-keyword placeholder="请输入用户昵称" :remote-method="remoteMethod" :loading="loading">
							<el-option v-for="item in options" :key="item.id" :label="item.nickName" :value="item.id">
							</el-option>
						</el-select>
					</div>

					<div class="message-board-right-message-content-box">
						<span class="el-icon-paperclip message-content-lable"></span>
						<textarea cols="110" rows="6" placeholder="
              风能带走秋天的树叶，
					   
	    但却带不走你对Ta的思念，
				 
          留下你的悄悄话，让我来告诉他~" class="message-content-textarea" v-model="leavingAMessageData.content"></textarea>
					</div>

					<div class="message-board-right-written-words">

						<i class="el-icon-s-promotion" @click="sendAMessage"></i>

					</div>
					<hr class="message-board-right-aircraft-underline" />
				</div>

			</el-container>
		</el-container>
	</div>

</template>

<script>
	import {
		devMessageBoardManagementUrl
	} from '@/api/apiconst'
	import {
		devUserManagementUrl
	} from '@/api/apiconst'
	import jwtDecode from 'jwt-decode';
	export default {
		name: "MessageBoard",
		data() {

			return {
				//留言内容
				leavingAMessageData: {
					commenterId: {
						ID: jwtDecode(localStorage.getItem("token")).ID
					},
					recipientId: {
						ID: ''
					},
					readStatus: 0,
					content: '',
					type: 1,
					is_operation:0
				},
				//未读留言数量
				unreadMessage: {
					systemMessageCount: 0,
					privateMessageCount: 0
				},
				//留言分页对象
				leavingAMessagePage: {
					//留言类型
					type: 0,
					//总页数
					pageCount: 0,
					//总记录条数
					total: 0,
					//页码
					page: 1,
					//单页展示条数
					size: 8
				},
				//是否展示，留言列表界面
				showBox: false,
				showOperationButton:true,
				//是否正在搜索好友
				loading: false,
				//搜索好友的框渲染数据
				options: [],
				labelName: "给Ta留言",
				tableData: [],
				input: ""
			}
		},
		mounted() {
			//加载未读消息数量
			this.loadedNumberOfUnreadMessages();
		},
		/**
		 * 监听发送过来的聊天消息
		 */
		watch: {
			'$store.state.leavingAMessage':{
				handler(newVal, oldVal) {
			
				//判断本次接收的是系统留言还是私信
				if(newVal.privateLetterStr!=null&&newVal.privateLetterStr!=''){
					console.log("11");
				if(this.labelName == "私信"){
					console.log("222");
					//修改留言读取状态
					this.modifyMessageReadingStatus(1);
					//加载留言列表
					this.loadMessageList(1, 1);
				
				}else{
					console.log("33");
						this.unreadMessage.privateMessageCount++;
				}
				
				
				}else if(newVal.systemMessageStr!=null&&newVal.systemMessageStr!=''){
					console.log("44");
					if(this.labelName == "系统留言"){
						console.log("55");
						//修改留言读取状态
						this.modifyMessageReadingStatus(0);
						//加载留言列表
						this.loadMessageList(0, 1);
									
					}else{
						console.log("66");
						this.unreadMessage.systemMessageCount++;
					}
				}
					
				},
				deep:true
			}
		},
		methods: {


			//设置表格样式
			headeRowClass({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				//表头的背景颜色
				if (rowIndex == 0) {
					return 'background:Transparent'
				}
			},
			callBackHome() {
				//跳转主页
				this.$router.push({
					path: "/home"
				});
			},
			//加载系统留言
			loadSystemMsg() {
				this.labelName = "系统留言";
				this.showBox = true;
				this.unreadMessage.systemMessageCount = 0;
				this.leavingAMessagePage.type = 0;
				//修改留言读取状态
				this.modifyMessageReadingStatus(0);
				//加载留言列表
				this.loadMessageList(0, this.leavingAMessagePage.page);
				console.log("加载系统消息数据");
			},
			//加载用户留言
			loadUserMsg() {
				this.showBox = true;
				this.labelName = "私信";
				this.unreadMessage.privateMessageCount = 0;
				this.leavingAMessagePage.type = 1;
				//修改留言读取状态
				this.modifyMessageReadingStatus(1);
				//加载留言列表
				this.loadMessageList(1, this.leavingAMessagePage.page);
				console.log("加载用户留言");
			},
			//创建留言
			createAMessage() {
				this.labelName = "给Ta留言";
				this.showBox = false;
			},
			//搜素好友
			remoteMethod(query) {

				if (query !== '') {
					this.loading = true;



					//加载用户列表
					this.$axios({
						method: 'GET',
						url: '/user/list/' + query,
						baseURL: devUserManagementUrl,
					}).then(
						response => {

							if (response.data.code == 200) {

								this.options = response.data.data;


								this.loading = false;
							}


						},
						error => {
							this.$message.error('诶呀，服务器走丢了，稍后再来试试吧');
							//刷新图形验证码
							this.refreshCode();
						}
					);




				} else {
					this.options = [];
				}
			},
			//发送留言
			sendAMessage() {
				if (this.leavingAMessageData.recipientId.ID == '' || this.leavingAMessageData.recipientId.ID == null) {
					this.$message.error("接收者不能为空哦~");
					return;
				}
				if (this.leavingAMessageData.content == '' || this.leavingAMessageData.content == null) {
					this.$message.error("留言内容不能为空哦~");
					return;
				}
				console.log("shujuj", this.leavingAMessageData)

				this.$axios({
					method: 'POST',
					url: '/messageBoard/pushLeavingAMessage',
					baseURL: devMessageBoardManagementUrl,
					data: {

						messageType: 'message_type_private_letter',
						jsonData: JSON.stringify(this.leavingAMessageData)


					}
				}).then(
					response => {
						if (response.data.code == 200) {
							this.$message.success("留言成功");
							this.leavingAMessageData.content = '';
							this.leavingAMessageData.recipientId.ID = '';
						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			},
			/**
			 * 加载未读留言数量
			 */
			loadedNumberOfUnreadMessages() {
				//加载留言未读消息数量
				this.$axios({
					method: 'GET',
					url: '/messageBoard/queryUnreadQuantity/' + jwtDecode(localStorage.getItem("token")).ID,
					baseURL: devMessageBoardManagementUrl,
				}).then(
					response => {
						if (response.data.code == 200) {
							const result = response.data.data;
							const _this = this;
							result.forEach(function(item, index) {
								//判断是否为系统通知数据
								if (item.type == 0) {
									_this.unreadMessage.systemMessageCount = item.unread_quantity;
									//判断是否为私聊数据	
								} else if (item.type == 1) {
									_this.unreadMessage.privateMessageCount = item.unread_quantity;
								}
							});

						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			},
			/**修改留言读取状态
			 * @param {Object} type 留言类型
			 */
			modifyMessageReadingStatus(type) {
				this.$axios({
					method: 'POST',
					url: '/messageBoard/updateReadStatus',
					baseURL: devMessageBoardManagementUrl,
					data: {
						userId: jwtDecode(localStorage.getItem("token")).ID,
						type: type
					}
				}).then(
					response => {
						if (response.data.code == 200) {
							const result = response.data.data;


						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			},
			/**加载留言列表
			 * @param {Object} type 留言类型
			 * @param {Object} page 当前页码
			 */
			loadMessageList(type, page) {
				this.$axios({
					method: 'POST',
					url: '/messageBoard/queryList',
					baseURL: devMessageBoardManagementUrl,
					data: {
						page: page,
						size: this.leavingAMessagePage.size,
						userId: jwtDecode(localStorage.getItem("token")).ID,
						type: type
					}
				}).then(
					response => {
						if (response.data.code == 200) {
							const result = response.data.data;
							console.log("留言列表", result)
							this.tableData = result.records;
							// 获取总页数
							this.leavingAMessagePage.pageCount = result.pages;
							// 获取总记录数
							this.leavingAMessagePage.total = result.total;



						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			},

			/**
			 * 留言列表分页监听
			 * @param {Object} currentPage 单前页码
			 */
			handleCurrentChange(currentPage) {

				this.loadMessageList(this.leavingAMessagePage.type, currentPage);

			},
			/**是否通过好友申请
			 * @param {Object} leavingAMessageId 留言ID
			 * @param {Object} isAdopt 是否通过申请
			 * @param {Object} commenterId 发送者ID
			 */
			friendVerification(leavingAMessageId, isAdopt, commenterId) {
				//隐藏按钮
				this.showOperationButton=false;
				console.log("开始处理");
				this.$axios({
					method: 'POST',
					url: '/messageBoard/processFriend',
					baseURL: devMessageBoardManagementUrl,
					data: {
						leavingAMessageId: leavingAMessageId,
						applyWhetherAdopt: isAdopt,
						commenterId: commenterId,
						recipientId: jwtDecode(localStorage.getItem("token")).ID,
						nickName: jwtDecode(localStorage.getItem("token")).nickName,
						avatarLink: jwtDecode(localStorage.getItem("token")).avatarLink

					}
				}).then(
					response => {
						if (response.data.code == 200) {
							const result = response.data.data;
							console.log("处理结果：--》", result)

							this.tableData.forEach(function(item, index) {
								if (item.ID == leavingAMessageId) {
									item.is_operation = 2;
								}
							})

							this.$message.success('完成');
						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			}
		}


	};
</script>

<style scoped>
	.bottom-tip {
		position: absolute;
		bottom: 2%;
		right: 22%;

	}

	.leaving-a-message-page-box>>>.btn-prev,
	.btn-next {
		background-color: Transparent;
		color: white;
	}

	.leaving-a-message-page-box>>>.el-pager li {
		background-color: Transparent;
		/* color:white; */
	}

	.leaving-a-message-page-box>>>.btn-next {
		background-color: Transparent;
		color: white;
	}


	.private-message-count {
		position: absolute;
		right: 67%;
		top: 50%;

	}

	.system-message-count {
		position: absolute;
		right: 58%;
		top: 48%;
	}

	.message-board-parent-box {
		background: url("@/assets/images/register-background-map.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		overflow: auto;
		height: 100%;
		width: 100%;
		min-height: 100vh;
	}



	.message-board-el-container-parent {
		width: 100%;
		height: 100%;
	}

	.message-board-left-layout {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		left: 3%;
		width: 40%;
		height: 40%;
		top: 4%;
		color: white;
	}

	.message-board-left-el-menu-box {
		background-color: rgba(0, 0, 0, 0.5);
		border-right: solid 0px #e6e6e6;

	}

	.message-board-left-el-menu-box .el-menu-item {
		color: white;
	}

	.call-back-home-icon-box {
		position: fixed;
		left: 10%;
		top: 47%;
		color: white;

		font-size: 34px;
	}

	.message-board-right-layout {
		/* background-color: rgba(0, 0, 0, 0.5); */
		margin-left: 22%;
		width: 65%;
		height: 100%;
		overflow: auto;
	}

	.message-board-right-el-header {
		position: fixed;
		width: 65%;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		z-index: 1;
	}

	.message-board-right-el-header .label-msg-span {
		margin-left: 2%;
		margin-top: 1%;
		display: inline-block;
	}

	.delete-msg-all-i {
		float: right;
		margin-right: 2%;
		margin-top: 1%;
		font-size: 27px;
	}

	.message-board-avatar-URL-img {
		width: 10%;
		height: 10%;

	}

	.message-board-content {
		color: white;
		min-width: 100%;
		min-height: 80px;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 40px;
		top: 5px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		/* word-wrap: break-word; */
	}

	.message-board-content:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-top: 13px solid transparent;
		border-right: 26px solid rgba(0, 0, 0, 0.5);
		border-bottom: 13px solid transparent;
		margin: 13px 0 0 -25px;
	}

	.message-board-time {
		color: white;
	}

	.message-board-right-el-main-parent-div {
		margin-right: 2%;
		margin-top: 2%;
		width: 100%;
		height: 100%;
		background-color: Transparent;
		z-index: 0;
		/* border: solid 1px yellow; */
	}

	.message-board-right-create-a-message {
		position: absolute;
		left: 22%;
		top: 8%;
		width: 65%;
		height: 90%;
		background-color: Transparent;
		overflow: auto;
		z-index: 0;
		color: white;
	}

	.message-board-right-written-words {
		position: absolute;
		right: 30%;
		top: 75%;
		width: auto;
		height: auto;
		font-size: 50px;
		/* background-color: red; */
	}

	.message-board-right-aircraft-underline {
		position: absolute;
		right: 32%;
		top: 81%;
		width: 30%;
	}

	.message-board-right-message-content-box {

		width: 45%;
		height: 50%;
		margin-left: 10%;
		margin-top: 5%;
	}

	.message-content-lable {
		width: 33px;
		height: 31px;
		font-size: 36px;
		position: absolute;
		right: 44%;
		top: 19%;
		color: #409EFF;
		background-color: transparent;
		transform: rotate(-7deg);
	}

	textarea::-webkit-input-placeholder {
		/* WebKit browsers */
		color: white;
		font-size: 23px;
		padding-top: 20%;
	}




	textarea::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: white;
		font-size: 23px;
		padding-top: 20%;
	}

	textarea:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: white;
		font-size: 23px;
		padding-top: 20%;
	}

	.message-content-textarea {
		width: 100%;
		height: 100%;
		color: white;
		background-color: Transparent;
		border-radius: 15px;
		border: 2px solid white;
		font: bold 200% Consolas, Monaco, monospace;
		font-weight: 500;

	}

	.message-board-right-user-nick-name-box {
		width: 25%;
		height: 10%;
		margin-left: 10%;
		margin-top: 2%;
		font-size: 22px;
	}

	/*最外层透明*/
	.message-board-parent-box>>>.el-table,
	.message-board-parent-box>>>.el-table__expanded-cell {
		background-color: transparent;

	}

	/* 表格内背景颜色 */
	.message-board-parent-box>>>.el-table th,
	.message-board-parent-box>>>.el-table tr,
	.message-board-parent-box>>>.el-table thead,
	.message-board-parent-box>>>.el-table td {
		background-color: transparent;
		border: none;
	}

	.message-board-parent-box>>>.el-table tbody tr:hover>td {
		background-color: transparent !important;
	}


	.message-board-parent-box>>>.el-container {
		display: inherit;

	}
</style>
